<template>
  <div>
    <el-row>
      <el-input
        placeholder="转换的内容粘贴在这里"
        type="textarea"
        :rows="15"
        resize="none"
        v-model="input"
        clearable>
      </el-input>
    </el-row>
    <el-row style="float: right; margin-top: 10px">
      <el-button type="primary" @click="UrlEncode">UrlEncode编码</el-button>
      <el-button type="warning" @click="UrlDecode">UrlDecode解码</el-button>
      <el-button type="info" @click="reset">清空结果</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Unicode',
  data () {
    return {
      input: '',
      result: ''
    }
  },
  methods: {
    UrlEncode () {
      if (!this.input) {
        this.openAlert('文本框不能为空')
        return
      }
      this.input = encodeURIComponent(this.input)
    },
    UrlDecode () {
      if (!this.input) {
        this.openAlert('文本框不能为空')
        return
      }
      this.input = decodeURIComponent(this.input)
    },
    reset () {
      this.input = ''
      this.result = ''
    },
    // 弹框提示
    openAlert (msg) {
      this.$alert(msg, '错误提示', {
        confirmButtonText: '确定',
        callback: action => {}
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input {
  padding: 10px
}
</style>
